<template>
  <DetailBox :border="2" :is-detail="false">
    <template #center>
      <el-row :gutter="12">
        <el-col>
          <ContentBox :border="3" :marginHeight="140">
            <template #center>
              <ZTable
                  class="complexTable"
                  :tableData="tableData"
                  :tableDataHeader="tableDataHeader"
                  @deleteRow="deleteRow"
                  @detailRow="detail"
                  @TSelected="Select"
              >
              </ZTable>
              <el-pagination class="tablePagination"
                             background
                             v-model:currentPage="currentPage" :page-size="pageSize"
                             layout="total, prev, pager, next" :total="100" @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"></el-pagination>
            </template>
          </ContentBox>

        </el-col>
      </el-row>
    </template>
  </DetailBox>
</template>

<script setup lang="ts">
import {type Ref, ref, watch} from 'vue';
import DetailBox from "@/views/components/DetailBox.vue";
import ContentBox from "@/views/components/ContentBox.vue";
import {ElTree} from 'element-plus'
import ZTable from "@/views/components/table/ZTable/index.vue";

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()


watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const tableData = ref([
  {
    name: 'knife1',
    date: '2024-09-22',
    type: 'butterfly'
  },
  {
    name: 'knife2',
    date: '2024-09-22',
    type: 'M9'
  },
  {
    name: 'knife3',
    date: '2024-09-22',
    type: 1
  }
])
const tableDataHeader = ref([
  {
    label: '航空公司',
    prop: 'name',

  },
  {
    label: '机型',
    prop: 'date',
    width: 180
  },
  {
    label: '到达航班',
    prop: 'type',
    width: 180
  },
  {
    label: '起飞航班',
    prop: 'type',
    width: 180
  },
  {
    label: '实际到达',
    prop: 'type',
    width: 260
  },
  {
    label: '预计起飞',
    prop: 'Date',
    width: 260
  },
  {
    label: '机位',
    prop: 'num',
    width: 100
  },
])

const deleteRow = (row: any, index: number) => {
  tableData.value.splice(index, 1)
  console.log('this tableData: ', tableData)
  // pagenation.value.total = tableData.value.length
}

const valid = ref(false)

const detail = (row, index) => {
  // console.log('row: ', row, index)
}

/*
表格新增编辑操作
* */

const Select = (val) => {
  console.log(val, 1)
}

const currentPage = ref<number>(1) //当前页
const pageSize = ref<number>(17) //每页大小

const handleGetArticleList = async () => {
  // loading.value = true
  // const res = await getArticleList({page: currentPage.value, limit: pageSize.value})
  // const {code, data} = res.data
  // if (code === 10000) {
  //   article.value = data.items
  // }
  // loading.value = false
}

/**
 * @desc:设置显示条数
 * @param {number} size 显示条数
 */
const handleSizeChange = (size: number) => {
  pageSize.value = size
  handleGetArticleList()
}
/**
 * @desc:设置当前页数
 * @param {number} page 页数
 */
const handleCurrentChange = (page: number) => {
  currentPage.value = page
  handleGetArticleList()
}

</script>

<style lang="scss" scoped>

.complexTable {
  height: calc(100% - 60px);
  //padding-left: 20px;
  //padding-right: 20px;
  padding-bottom: 10px;
}

.tablePagination {
  justify-content: end;
  //margin-top: -10px;
}
</style>